<template>
  num:{{ num }}
  <br />
  numB: {{ numB }}
  <br />
  <button @click="btnClick">加-count:{{ count.num }}</button>
</template>

<script>
import { reactive, toRefs, toRef, isRef } from 'vue'
export default {
  setup() {
    const count = reactive({
      num: 10,
    })
    // 此时解构出来的数据不是响应式的
    // let { num } = count

    // 使用toRefs包裹后解构的数据为ref响应式整个解构
    let { num } = toRefs(count)
    // 使用toRefs包裹后解构的数据为ref响应式单个
    let numB = toRef(count, 'num')
    const btnClick = () => {
      // count.num += 1
      num.value += 1
      console.log(isRef(num))
    }
    return {
      count,
      btnClick,
      num,
      numB,
    }
  },
}
</script>
<style scoped></style>
